<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <!-- Path to Framework7 Library CSS-->
     <link rel="stylesheet" href="/static/css/framework7.min.css">
      <link href="/static/support/skype/emoticons.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="/static/css/style.css">
    <!-- Path to your custom app styles-->
  </head>
  <body>
     <!-- Status bar overlay for fullscreen mode -->
    <div class="statusbar-overlay"></div>
    <!-- Panels overlay -->
    <div class="panel-overlay"></div>
    <!-- Views-->
    <!-- Views-->
    <div class="views">
      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main navbar-through">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left"><a href="#" class="back link"><a></div>
            <div class="center sliding">在线客服</div>
            <a href="#" class="link"> </a>
          </div>
        </div>
        <!-- Top Navbar-->
        <div class="navbar cached">
          <div class="navbar-inner">
            <div class="left"><a href="#" class="back link">返回<a></div>
            <div class="center sliding"></div>
            <a href="#" class="link"> </a>
          </div>
        </div>
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages">
          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page no-toolbar toolbar-fixed">
            <!-- Scrollable page content-->
               <div class="page-content">
                 <div class="list-block media-list">
                  <ul id="user-lists">
                    <!--列表-->
                  </ul>
                 </div>
            </div>
          </div>
          <!--massge start-->
            <div data-page="messages" class="page no-toolbar toolbar-fixed cached">
                <div class="toolbar messagebar">
                    <div class="toolbar-inner"><a href="#" id="sendPhoto" class="link icon-only"><i class="icon icon-camera"></i></a>
                        <textarea placeholder=""></textarea><a href="#" class="link">发送</a>
                    </div>
                </div>
                <div class="page-content messages-content">
                    <div class="messages" id="massge-content-box">
                      <!--自己发送的消息-->
                        <div class="message message-with-avatar message-first message-sent message-with-tail">
                          <div class="message-text">d多大的</div>
                          <div class="message-avatar" style="background-image:url(static/img/h.png)">
                            <div class="message-name">Anon</div>
                          </div>
                        </div>
                        <!--对方发送的消息-->
                        <div class="message message-with-avatar message-first message-received message-with-tail">
                          <div class="message-text">2222222</div>
                          <div class="message-avatar" style="background-image:url(static/img/h.png)">
                            <div class="message-name" style="display:black;">perry</div>
                          </div>
                        </div>
                    </div>
                </div>
          </div>
           
          <!--massge end-->
        </div>       
      </div>
    </div>
    <script src="http://s4.qhimg.com/static/535dde855bc726e2/socket.io-1.2.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="/static/js/framework7.min.js"></script>
     <script type="text/javascript" src="/static/js/emoticons.js"></script>
     <script type="text/javascript" src="/static/js/base.js"></script>
     <!--用户列表模板-->
     <script type="application/javascript" id="user-item">
      <li id="user-{openid}">
        <a href="#" class="link to-massge-button" data-aid="{openid}" data-nickname="{nickname}">
        <div class="item-content">
          <div class="item-media headvar"><img src="{headvar}" width="44"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title nickname">{nickname}</div>
              <div class="item-after datetimes"><span class="lasttime">{lasttime}</span>&nbsp;<span class="linestr">{linestr}</span></div>
            </div>
            <div class="item-subtitle text">{massge}</div>
          </div>
        </div>
      </a>
      </li>
     </script>
     <script type="text/javascript" id="massge-item-box">
        <div class="message message-with-avatar message-with-tail {style}">
          <div class="message-text">{text}</div>
          <div class="message-avatar" style="background-image:url({avatar})">
            <div class="message-name" style="display:black;">{nickname}</div>
          </div>
        </div>
     </script>
    <!-- Path to your app js-->
    <script type="text/javascript">
       var socket = io("http://localhost:8360");
       //发送事件
       var app_id = <%=users.appId%>; //app ID
       var openid = "<%=users.openid%>"; //微信openid
       var nickname = "<%=users.nickname%>";//昵称
       var is_service = parseInt(<%=users.service%>);//昵称
       var headvar = "<%=users.headvar%>"
       var to_openid = ''; //对谁发送
       var to_nickname = '';//接收人的昵称
       var _hase = is_service == 1 ? '#users' : '#service' ;
       location.hash = _hase
       socket.emit("userlist", {appid:app_id,service:is_service,openid:openid});
        //监听事件
        socket.on("userlist", function(data){
          console.log(data)
            if(data.status){
              var items = data.info;
              var userItemHTML = $("#user-item").html();
              var userListdome = $("#user-lists");
              var lastTime = 0;
              for (var i = 0; i < items.length; i++) {
                  var ItemHTML = userItemHTML;
                  var headvar = items[i].headvar;
                  if(headvar == null || headvar == ''){
                    headvar = "static/img/h.png";
                  }
                  ItemHTML = ItemHTML.replace(/{nickname}/g,items[i].nickname);
                  ItemHTML = ItemHTML.replace(/{headvar}/g,headvar);
                  ItemHTML = ItemHTML.replace(/{id}/g,items[i].id);
                  ItemHTML = ItemHTML.replace(/{openid}/g,items[i].openid);
                  ItemHTML = ItemHTML.replace(/{massge}/g,items[i].text);
                  ItemHTML = ItemHTML.replace(/{lasttime}/g,'下午 12:00');
                  ItemHTML = ItemHTML.replace(/{linestr}/g,items[i].linestr);
                  userListdome.append(ItemHTML);
              };
              //var userItemHTML = $("#user-item").html();
            }
        })
      
      $("#user-lists").on('click',".to-massge-button",function(){
        var _this = $(this);
          mainView.router.load({pageName: "messages"}); //切换视图
          location.hash = "#massge";
          to_openid = _this.data("aid");
          to_nickname = _this.data("nickname");
          socket.emit('massges',{
             appId:app_id,
             from_openid:openid,
             to_openid:to_openid,
          })
      })
      /*发送事件*/
      $('.messagebar a.link').on('click', function () {
          var textarea = $('.messagebar textarea');
          var messageText = textarea.val();
          if (messageText.length === 0) return;
          
          //发送消息
          socket.emit('chat', {
              text: stripMessage(messageText),
              type: 'sent',
              openid: openid,
              appId:app_id,
              to_openid: to_openid,
              nickname:nickname,
              to_nickname:to_nickname,
              ctime:Date.parse(new Date())
          });
          var massgeItemboxHTML = $("#massge-item-box").html();
              massgeItemboxHTML = massgeItemboxHTML.replace(/{nickname}/g,nickname);
              massgeItemboxHTML = massgeItemboxHTML.replace(/{text}/g,stripMessage(messageText));
              massgeItemboxHTML = massgeItemboxHTML.replace(/{avatar}/g,headvar);
              massgeItemboxHTML = massgeItemboxHTML.replace(/{style}/g,'message-sent');
              $("#massge-content-box").append(massgeItemboxHTML)
          textarea.val('')
      });
      /*监听连接*/
      socket.on("connection",function(data){
        console.log(data);
          if(data.status == 1){
            if($("#user-"+data.openid).length){
              $("#user-"+data.openid).find(".linestr").html("在线");
            }
          }else{
            $("#user-"+data.openid).find(".linestr").html("离线");
          }
      })
      /*监听关闭*/
      socket.onclose = function(event) { 
        /*断开的时候广播给所有的用户*/
        socket.emit("conne",{openid:openid})
      }
      /*监听发送*/
      socket.on('chat',function(data){
          console.log(data)
      })
      /*监听接收信息*/
      socket.on('accept',function(data){
        if(location.hash == '#massge'){
            var massgeItemboxHTML = $("#massge-item-box").html();
            massgeItemboxHTML = massgeItemboxHTML.replace(/{nickname}/g,data.nickname);
            massgeItemboxHTML = massgeItemboxHTML.replace(/{text}/g,data.text);
            massgeItemboxHTML = massgeItemboxHTML.replace(/{avatar}/g,data.avatar);
            massgeItemboxHTML = massgeItemboxHTML.replace(/{style}/g,'message-received');
            $("#massge-content-box").append(massgeItemboxHTML)
        }else{
          var thisUserDom = $("#user-"+data.form_openid);
          thisUserDom.find(".text").html(data.text);
          var FirstUserItem = thisUserDom.prop("outerHTML");
          thisUserDom.remove();
          $("#user-lists").prepend(FirstUserItem);
        }
      })
      $(".back").click(function(){
          location.hash = _hase
      })
    </script>
  </body>
</html>